<template>
  <div id="Iview">
    <Table
      stripe
      border
      :loading="tableLoading"
      :columns="tableColumnsMixin"
      :data="tableMixinData"
      @on-select="tableSingleCheckSelect"
    >
      <template slot="name" slot-scope="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template slot="action" slot-scope="{ row, index }">
        <Button type="primary" size="small" style="margin-right: 5px" @click="tableHandleCheckClick(index)">查看</Button>
        <Button type="primary" size="small" style="margin-right: 5px" @click="tableHandleEditClick(index)">编辑</Button>
        <Button type="error" size="small" @click="tableHandleDeleteClick(index)">删除</Button>
      </template>
    </Table>
    <!--分页-->
    <div class="block columnCC mt-2 mb-5">
      <Page
        :total="pageTotal"
        size="small"
        show-elevator
        prev-text
        next-text
        show-sizer
        :page-size="pageSize"
        :page-size-opts="[10, 20, 50, 100]"
        :current="pageNum"
        @on-change="pageHandleCurrentChange"
        @on-page-size-change="pageHandleSizeChange"
      />
    </div>
    <!--表单-->
    <Form
      ref="refForm"
      label-position="left"
      :label-width="100"
      :inline="false"
      :model="formModel"
      :rules="fromRules"
    >
      <FormItem prop="desc">
        <Input v-model="formModel.desc" type="text" placeholder="Username" />
        <Icon slot="prepend" type="ios-person-outline" />
        </Input>
      </FormItem>
      <FormItem
        prop="password"
        label-position="right"
        :label-width="100"
      >
        <Input v-model="formModel.password" type="password" placeholder="Password" />
        <Icon slot="prepend" type="ios-lock-outline" />
        </Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="submitForm('formModel')">提交</Button>
      </FormItem>
    </Form>
    <!--多个表单验证-->
    <Form
      ref="reForFormModal"
      :model="forFormModal"
      size="small"
      :rules="forFormRules"
    >
      <FormItem
        label-position="left"
        label="名称"
        prop="title"
      >
        <Input v-model="forFormModal.title" />
      </FormItem>
      <Row v-for="(item, index) in forFormModal.userList" :key="index">
        <Col :span="4" />
        <FormItem
          label="用户名："
          :prop="'userList.'+ index +'.name'"
          :rules="forFormRules.username"
        >
          <Input
            v-model="item.username"
            class="widthPx-80"
            size="small"
          />
        </FormItem>
        </Col>
        <Col :span="4" />
        <FormItem
          label="密码："
          :prop="'userList.'+ index +'.password'"
          :rules="forFormRules.password"
        >
          <Input
            v-model="item.password"
            class="widthPx-100"
            type="password"
          />
        </FormItem>
        </Col >
        <Col :span="5" />
        <FormItem
          label="手机号："
          :prop="'userList.'+ index +'.phone'"
          :rules="forFormRules.phone"
        >
          <Input
            v-model="item.phone"
            class="widthPx-100"
            size="small"
          />
        </FormItem>
        </Col>
      </Row>
    </Form>
    <!--modal弹框-->
    <Button @click="dialogVisible=true">modal弹框</Button>
    <!--fullscreen-->
    <Modal
      v-model="dialogVisible"
      width="40vw"
      @on-ok="beforeCloseModal"
      @on-cancel="beforeCloseModal"
    >
      <p slot="header" style="color:#333;text-align:left">
        <span>Delete confirmation</span>
      </p>
      <div style="text-align:center">
        <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
        <p>Will you delete it?</p>
      </div>
      <div slot="footer" class="text-center">
        <Button type="success" @clik="modalConfirmBtn">确定</Button>
      </div>
      <!--保存按钮-->
      <!--<div class="text-center fixBtnToBottom">-->
      <!--<el-button type="primary" @click.prevent="saveBtnClick">-->
      <!--保存-->
      <!--</el-button>-->
      <!--</div>-->
    </Modal>
    <!--message confirm tip-->
    <Button @click="iMessage('error')">iMessage</Button>
    <Button @click="btnSubmit()">confirm</Button>
    <Button @click="iNotify()">notify</Button>

    <!--时间轴-->
    <DatePicker
      type="datetimerange"
      format="yyyy-MM-dd HH:mm:ss"
      clearable
      style="width: 320px"
      :options="datePickerOptions"
      placeholder="请选择时间范围"
      @on-change="datePickerConfirm"
    />

    <!--多选框-->
    <CheckboxGroup v-model="border">
      <Checkbox label="key1" border>香蕉</Checkbox>
      <Checkbox label="key2" border>桃子</Checkbox>
      <Checkbox label="key3" border>苹果</Checkbox>
    </CheckboxGroup>

    <!--Switch-->
    <i-switch
      v-model="switchChoose"
      true-color="red"
      false-color="green"
      :true-value="1"
      :false-value="0"
    >
      <span slot="open">ON</span>
      <span slot="close">OFF</span>
    </i-switch>

  </div>

</template>

<script>
// import { mapState, mapMutations, mapActions } from 'vuex'
import IviewDataOrMethord from './IviewDataOrMethord'
export default {
  name: 'Iview',
  components: {
    // TablesGZCJ,
  },
  mixins: [IviewDataOrMethord],
  props: {
    // treeData: Array,
  },
  // mixins: [validMixins],
  data() {
    return {
      border: ['key1'],
      switchChoose: 1
    }
  },
  computed: {
    // ...mapState('user', ['token', 'userInfo'])
  },
  watch: {
    // 'cmAddForm.enginePlatform': function(val) {
    //   console.log('enginePlatformval', val)
    //   if (val) {
    //     this.emissionOptionReq()
    //   }
    // }
  },
  created() {

  },
  mounted() {

  },
  methods: {
    // ...mapActions('user', ['closeSideBar']),
    // ...mapMutations('user', ['CHAGE_TOKEN']),
    functionTest() {},
    btnSubmit() {
      this.iConfirm('确定提交', '你确定要删除吗')
        .then(value => {
          console.log('dddddd')
          this.iMessage('success', '提交成功')
        })
    }
  }
}
</script>

<style lang="scss">
  #Iview {

  }
</style>

